<template>
    <div>
               <!-- 卡片 -->
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right" style=" margin-bottom:20px ;">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb> -->
    <!-- 使用自己二次封装的组件 -->
    <bread :second="'权限管理'" :third="'角色列表'"></bread>

    <el-card class="box-card">
        <!-- 表格 -->
          <el-table
    :data="tableData"
    border
    style="width: 100%">
      <el-table-column
      type="index"
      width="50"
      label="#"
      >
    </el-table-column>
    <el-table-column
      prop="authName"
      label="权限名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="path"
      label="路径"
      width="180">
    </el-table-column>
    <el-table-column
      label="权限等级">
      <template slot-scope='scope'>
          <el-tag v-if="scope.row.level==0">一级</el-tag>
          <el-tag type="success" v-else-if="scope.row.level==1">二级</el-tag>
          <el-tag type="warning" v-else>三级</el-tag>
      </template>
    </el-table-column>
  </el-table>
    </el-card>
    </div>
</template>


<script>
// 导入
import {RightsList_api} from '@/api/index.js'
  export default {
    data() {
      return {
        tableData: [],
      }
    },
    created() {
        this.GetRightsList()
    },
    methods: {
       
    //获取列表
    async GetRightsList(list){
        const {data:res} = await RightsList_api('list')
        // console.log(res,99999);
        this.tableData = res.data
        

    }

  },
  }
 
</script>